<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#region{
				position: absolute;
				display: flex;
				width: 100%;
				height: 2000px;
			}
			#region1 {
				width: 200px;
				
				background-color: #90EE90;
			}
			
			#region2 {
				flex: 1;
				display: flex;
			}
			
			#region3 {
				width: 200px;
				
				background-color: #90EE90;
			}
			table{
				width: 150px;
				border: none;
			}
			tr{
				background-color: aliceblue;
				
			}
			td{
				border: none;
				height: 5px;
				box-shadow:inset 0px 15px 15px -15px #D2B48C;
			}
			#td1{
				background-color: darkorange;
				
			}
			.p1{
				font-size: 15px;
				text-align: center;
			}
			#p2{
				margin-left: 40px;
			}
			#p3{
				background-color: #FF8C00;
				height: 5px;
				width: 1800px;
			}
			.tdx{
				height: 250px;
				width: 500px;
			}
			.px{
				background-color: darkorange;
				text-align: center;
				width: 500px;
				
				font-size: 18px;
			}
			#table2{
				margin-left: 140px;
			}
			.pic1{
				
				width: 250px;
				height: 150px;
			}
			.re1{
				display: flex;
			}
			.re2{
				display: inline;
				margin-left: 20px;
			}
			.pp1{
				margin-left: 20px;
			}
		</style>
	</head>

	<body>
		<div id="region">
			<div id="region1">
				
			</div>
			<div id="region2">
				<div id="left">
					<table border="" cellspacing="" cellpadding="">
						<tr>
							<td><p class="p1"><<经典凉面>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<烤翅>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<什锦BBQ>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<葱爆羊肉>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<毛血旺>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<草莓起司>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<草莓派>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<牛肉三明治>></p></td>
						</tr>
						<tr id="tr1">
							<td id="td1">
								<p style="font-size: 30px;">销售排行</p>	
							</td>
						</tr>
						
						
						
						
						<tr>
							<td><p class="p1"><<经典凉面>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<烤翅>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<什锦BBQ>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<葱爆羊肉>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<毛血旺>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<草莓起司>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<草莓派>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<海鲜凉面>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<麻辣小龙虾>></p></td>
						</tr>
						<tr>
							<td><p class="p1"><<牛肉三明治>></p></td>
						</tr>
						
					</table>
				</div>
				<div id="right">
					<p id="p2">美食预定</p>
					<p id="p3"></p>
					<table id="table2">
						<tr>
							<td class="tdx">
								<p class="px">甜点</p>
								<div class="re1">
									<p><img class="pic1" src="img/img-1641290625352ae9babbff553643a6a967eb2b8c4101f.jpg"/></p>
									<div class="re2">
										<p><<草莓派>></p>
										<p class="pp1">单价：24元</p>
										<button style="margin-left: 100px;">订餐</button>
									</div>
								</div>
								
								
							</td>
							<td class="tdx">
								<p class="px">甜点</p>
								<div class="re1">
									<p><img class="pic1" src="img/img-1641290625352ae9babbff553643a6a967eb2b8c4101f.jpg"/></p>
									<div class="re2">
										<p><<草莓起司>></p>
										<p class="pp1">单价：27元</p>
										<button style="margin-left: 100px;">订餐</button>
									</div>
								</div>
							</td>
							<td class="tdx">
								<p class="px">中餐</p>
								<div class="re1">
									<p><img class="pic1" src="img/img-1641290625352ae9babbff553643a6a967eb2b8c4101f.jpg"/></p>
									<div class="re2">
										<p><<葱爆羊肉>></p>
										<p class="pp1">单价：42元</p>
										<button style="margin-left: 100px;">订餐</button>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td class="tdx">
								<p class="px">中餐</p>
								<div class="re1">
									<p><img class="pic1" src="img/img-1641290625352ae9babbff553643a6a967eb2b8c4101f.jpg"/></p>
									<div class="re2">
										<p><<海鲜凉面>></p>
										<p class="pp1">单价：18元</p>
										<button style="margin-left: 100px;">订餐</button>
									</div>
								</div>
							</td>
							<td class="tdx">
								<p class="px">中餐</p>
								<div class="re1">
									<p><img class="pic1" src="img/img-1641290625352ae9babbff553643a6a967eb2b8c4101f.jpg"/></p>
									<div class="re2">
										<p><<经典凉面>></p>
										<p class="pp1">单价：15元</p>
										<button style="margin-left: 100px;">订餐</button>
									</div>
								</div>
							</td>
							<td class="tdx">
								<p class="px">中餐</p>
								<div class="re1">
									<p><img class="pic1" src="img/img-1641290625352ae9babbff553643a6a967eb2b8c4101f.jpg"/></p>
									<div class="re2">
										<p><<烤翅>></p>
										<p class="pp1">单价：26元</p>
										<button style="margin-left: 100px;">订餐</button>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td class="tdx">
								<p class="px">西餐</p>
								<div class="re1">
									<p><img class="pic1" src="img/img-1641290625352ae9babbff553643a6a967eb2b8c4101f.jpg"/></p>
									<div class="re2">
										<p><<麻辣小龙虾>></p>
										<p class="pp1">单价：48元</p>
										<button style="margin-left: 100px;">订餐</button>
									</div>
								</div>
							</td>
							<td class="tdx">
								<p class="px">西餐</p>
								<div class="re1">
									<p><img class="pic1" src="img/img-1641290625352ae9babbff553643a6a967eb2b8c4101f.jpg"/></p>
									<div class="re2">
										<p><<毛血旺>></p>
										<p class="pp1">单价：36元</p>
										<button style="margin-left: 100px;">订餐</button>
									</div>
								</div>
							</td>
							<td class="tdx">
								<p class="px">西餐</p>
								<div class="re1">
									<p><img class="pic1" src="img/img-1641290625352ae9babbff553643a6a967eb2b8c4101f.jpg"/></p>
									<div class="re2">
										<p><<牛肉三明治>></p>
										<p class="pp1">单价：88 元</p>
										<button style="margin-left: 100px;">订餐</button>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td class="tdx">
								<p class="px"></p>
							</td>
							<td class="tdx">
								<p class="px">川菜</p>
								<div class="re1">
									<p><img class="pic1" src="img/img-1641290625352ae9babbff553643a6a967eb2b8c4101f.jpg"/></p>
									<div class="re2">
										<p><<什锦BBQ>></p>
										<p class="pp1">单价：36元</p>
										<button style="margin-left: 100px;">订餐</button>
									</div>
								</div>
							</td>
							<td class="tdx">
								<p class="px"></p>
							</td>
						</tr>
					</table>
				</div>
			</div>
			<div id="region3">
				
			</div>
		</div>

	</body>

</html>